
;(function(exports){
	var KeyBoard = function(input, options){
		// var body = document.getElementsByTagName('body')[0];
		this.el = document.getElementById('__w_l_h_v_c_z_e_r_o_divid');

		// var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid';
		this.el.style.display = 'block';

		// if(document.getElementById(DIV_ID)){
		// 	body.removeChild(document.getElementById(DIV_ID));
		// }
		if(input.innerHTML==="密码"){
			input.innerHTML=""
		};
		this.input = input;

		var self = this;
		var zIndex = options && options.zIndex || 1000;
		var width = options && options.width || '100%';
		var height = options && options.height || '193px';
		var fontSize = options && options.fontSize || '15px';
		var backgroundColor = options && options.backgroundColor || '#fff';
		var TABLE_ID = options && options.table_id || 'table_0909099';
		var mobile = typeof orientation !== 'undefined';

		// this.el.id = DIV_ID;
		// this.el.style.position = 'absolute';
		// this.el.style.left = 0;
		// this.el.style.right = 0;
		// this.el.style.bottom = 0;
		// this.el.style.zIndex = zIndex;
		// this.el.style.width = width;
		//this.el.style.height = height;
		// this.el.style.backgroundColor = backgroundColor;

		//样式
		var cssStr = '<style type="text/css">';
		cssStr += '#' + TABLE_ID + '{text-align:center;width:100%;height:160px;border-top:1px solid #CECDCE;background-color:#CECDCE;border-spacing:5px;border-collapse:separate;}';
		cssStr += '#' + TABLE_ID + ' td{width: 7%;min-width: 25px;max-width: 7%;border-radius: 5px;background: #fff;height: 40px;font-size: 1.5rem;}';
		//手机样式
		//if(!mobile){
			cssStr += '#' + TABLE_ID + ' td:hover{background-color:#1FB9FF;color:#FFF;}';
		//}
		cssStr += '</style>';

		//Button
		var btnStr = '<div style="width:60px;height:28px;background-color:#1FB9FF;';
		btnStr += 'float:right;margin-right:10px;text-align:center;color:#fff;';
		btnStr += 'line-height:28px;border-radius:3px;margin-bottom:5px;cursor:pointer;">完成</div>';

		//table
    var tableStyle = "letter";
		var tableStr = '<table id="' + TABLE_ID + '" >';
          tableStr += '<tbody id="tbody1" style="display: block">';
          tableStr += '<tr><td>q</td><td>w</td><td>e</td><td>r</td><td>t</td><td>y</td><td>u</td><td>i</td><td>o</td><td>p</td></tr>';
          tableStr += '<tr><td>a</td><td>s</td><td>d</td><td>f</td><td>g</td><td>h</td><td>j</td><td>k</td><td style="border-right:1px solid #ddd">l</td><td rowspan = 2 style="background-color:#D3D9DF;border-right:1px solid #ddd;">删除</td></tr>';
          tableStr += '<tr><td id="uporlow" style="background-color:#D3D9DF;">abc</td><td>z</td><td>x</td><td>c</td><td>v</td><td>b</td><td>n</td><td>m</td><td style="background-color:#D3D9DF;">123</td>';
          //tableStr += '<td rowspan="1" style="background-color:#1FB9FF;text-align:center;color:#fff;">完成</td></tr>';
          tableStr += '</tr>';
          tableStr += '<tr><td colspan=10 style="background-color:#1FB9FF;text-align:center;color:#fff;">完成</td></tr>';
          tableStr += '</tbody>';

			// tableStr += '</table>';
         tableStr += '<tbody id="tbody2" style="display: none">';
         tableStr += '<tr><td>1</td><td>2</td><td>3</td></tr>';
         tableStr += '<tr><td>4</td><td>5</td><td>6</td></tr>';
         tableStr += '<tr><td>7</td><td>8</td><td>9</td></tr>';
         tableStr += '<tr><td style="background-color:#D3D9DF;">ABC</td><td>0</td><td colspan="0.5" style="background-color:#D3D9DF;border-right:1px solid #ddd;">删除</td></tr>';
          tableStr += '<tbody>'
         tableStr += '</table>';
		this.el.innerHTML = cssStr + tableStr;

		function addEvent(e){
			var oTable = document.getElementById(TABLE_ID)
			var tbody1 = document.getElementById("tbody1");
			var tbody2 = document.getElementById("tbody2");
			var ev = e || window.event;
			var clickEl = ev.element || ev.target;
			var value = clickEl.textContent || clickEl.innerText;
			if(clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "删除" && value !== "abc" && value !== "ABC" && value !== "完成" && value !== "123"){
				if(self.input){
          var uporlow = document.getElementById("uporlow");
          var value1 = uporlow.textContent || uporlow.innerText;
          if(value1 === "ABC" ){
            self.input.innerHTML += '*';
						self.input.setAttribute('value',(self.input.getAttribute('value') + value.toLocaleUpperCase()));
          }else if(value1 === "abc"){
            self.input.innerHTML += '*';
						self.input.setAttribute('value',(self.input.getAttribute('value') + value));
          }
				}
			}else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "完成"){
				if(!self.input.innerHTML){
						//self.input.innerHTML="密码";
				}
				self.el.style.display = 'none';
			}else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "删除"){
				var num = self.input.innerHTML;
				var mynew = self.input.getAttribute('value');
				if(num){
					var newNum = num.substr(0, num.length - 1);
					self.input.innerHTML = newNum;
				}
				if(mynew){
					var newmynew = mynew.substr(0, mynew.length - 1);
					self.input.setAttribute('value',newmynew);
				}
			}else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "abc"){
				if(oTable.getAttribute('state')=='number'){
					tbody2.style.display = "none";
					tbody1.style.display = "block";
					oTable.setAttribute('state','letter')
				}else{
					//console.log(oTable.getAttribute('state'))
					clickEl.innerHTML = "ABC";
					var tds=document.getElementsByTagName("td");
					for(var i=0; i<tds.length; i++){
						tds[i].innerHTML=tds[i].innerHTML.toLocaleUpperCase();
					}
				}
      }else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "ABC"){
		if(oTable.getAttribute('state')=='number'){
			tbody2.style.display = "none";
			tbody1.style.display = "block";
			oTable.setAttribute('state','letter')
		}else{
			//console.log(oTable.getAttribute('state'))
			clickEl.innerHTML = "abc";
			var tds=document.getElementsByTagName("td");
			for(var i=0; i<tds.length; i++){
				tds[i].innerHTML=tds[i].innerHTML.toLocaleLowerCase();
			}
		}
      } else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "123" ){
        if(tbody1.style.display == "block"){
			oTable.setAttribute('state','number');
			tbody1.style.display = "none";
			tbody2.style.display = "block";
        }else if(tbody1.style.display == "none"){
			oTable.setAttribute('state','letter');
			tbody2.style.display = "none";
			tbody1.style.display = "block";
        }
      }
	}

		if(mobile){
			this.el.ontouchstart = addEvent;
		}else{
			this.el.onclick = addEvent;
		}
		//body.appendChild(this.el);
	}

	exports.KeyBoard = KeyBoard;

})(window);
